<template>
  <el-select
      v-model="unitNo.unitNo"
      placeholder="请选择你想要维护的部门..."
      style="width: 50%"
      @change="changeUnitForm(unitNo.unitNo,this.user.accountNo)"
  >
    <el-option
        v-for="x in allUnit"
        :key="x.unitNo"
        :label="x.unitName"
        :value="x.unitNo"
    />
  </el-select>
  <div v-show="this.allUnit.length!==0||this.accountNo!==''" class="card" style="margin: 20px">
    <el-card v-for="(myUnit, index) in this.myUnits" shadow="hover" :body-style="{ padding: '11px' }">
      <el-button style="float: right" @click="this.informInput=true" v-show="!this.informInput">编辑信息
      </el-button>
      <el-button style="float: right" @click="this.submitUnitData(myUnit)"
                 v-show="this.informInput"
      >提交信息
      </el-button>
      <el-descriptions
          class="margin-top"
          title="部门信息"
          :column="1"
          border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              部门名称
            </div>
          </template>
          <el-text>{{ myUnit.unitName }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              姓名
            </div>
          </template>
          <el-text>{{ myUnit.name }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              学号
            </div>
          </template>
          <el-text>{{ myUnit.accountNo }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              担任职位
            </div>
          </template>
          <el-text v-show="!this.informInput">{{ myUnit.unitPosition }}</el-text>
          <el-input v-show="this.informInput" v-model="myUnit.unitPosition"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              担任职责
            </div>
          </template>
          <el-text v-show="!this.informInput">{{ myUnit.unitDuty }}</el-text>
          <el-input v-show="this.informInput" v-model="myUnit.unitDuty"></el-input>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              担任开始时间
            </div>
          </template>
          <el-text v-show="!this.informInput">{{ myUnit.startTime }}</el-text>
          <el-date-picker
              v-if="this.informInput"
              v-model="myUnit.startTime"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择担任开始时间"
              :editable="false">
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              担任结束时间
            </div>
          </template>
          <el-text v-show="!this.informInput">{{ myUnit.endTime }}</el-text>
          <el-date-picker
              v-if="this.informInput"
              v-model="myUnit.endTime"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择担任结束时间"
              :editable="false">
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              备注
            </div>
          </template>
          <el-text v-show="!this.informInput">{{ myUnit.remark }}</el-text>
          <el-input v-show="this.informInput" v-model="myUnit.remark"></el-input>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>

</template>

<script>


import request from "@/util/request.js";
import router from "@/router/index.js";

export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('user')),
      isShow: false,
      informInput: false,
      unitNo: {},
      myUnits: [],
      accountNo: "",
      allUnit: [],
      pageNum: 1, // 页码
      pageSize: 10,  // 页长
      total: 0,  // 总表长
    }
  },
  created() {
    if (router.currentRoute.value.query.accountNo !== undefined) {
      this.accountNo = router.currentRoute.value.query.accountNo
      console.log(this.accountNo)
      this.changeUnitForm(router.currentRoute.value.query.unitNo, this.accountNo)
    } else {
      this.getMyUnit()
    }
  },
  methods: {
    // 修改信息
    submitUnitData(myUnit) {
      request.post("/related_unit/update", myUnit).then(res => {
        if (res.data.code === '200') {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          location.reload()
        } else {
          this.$message({
            type: 'error',
            message: '请联系管理员!'
          });
        }
      })
    },
    // 获取当前角色的所有部门
    getMyUnit() {
      request.get("/related_unit/getByAccountNo?accountNo=" + JSON.parse(localStorage.getItem('user')).accountNo).then(res => {
        if (res.data.code === '200') {
          this.allUnit = res.data.data
          console.log(this.allUnit)
          if (this.allUnit.length !== 0) {
            this.unitNo.unitNo = this.allUnit.at(0).unitNo
            this.changeUnitForm(this.unitNo.unitNo, JSON.parse(localStorage.getItem('user')).accountNo)
          }
        }
      })
    },
    changeUnitForm(unitNo, accountNo) {
      request.get("/related_unit/getByUnitNoAndAccountNo?unitNo=" + unitNo + "&accountNo=" + accountNo).then(res => {
        if (res.data.code === '200') {
          this.myUnits = []
          this.myUnits = res.data.data;
        }
      })
    },
  }
}
</script>

<style scoped>
.cell-item {
  text-align: center;
}

@media screen and (min-width: 1200px) {
  .card {
    width: 50%;
  }
}

/*992与1200为bootstrap的一个断点   根据他来设置会有一定效果*/
@media (min-width: 992px) and (max-width: 1200px) {

}

@media screen and (min-width: 768px) and (max-width: 992px) {

}

@media screen and (max-width: 768px) {

}
</style>
